<template>
  <div class="permission-mgmt-container">
    <el-card class="card">
      <template #header>
        <div class="card-header">权限管理</div>
      </template>

      <div class="layout">
        <!-- 左：角色与用户 -->
        <div class="left-pane">
          <div class="left-section">
            <div class="section-title">权限类型</div>
            <el-table :data="roleTypes" size="small" height="240" @row-click="selectRoleType">
              <el-table-column prop="name" label="类型名称" />
            </el-table>
          </div>

          <div class="left-section">
            <div class="section-title">员工权限</div>
            <el-table :data="users" size="small" height="260" @row-click="onUserRowClick">
              <el-table-column prop="username" label="员工用户名" width="120" />
              <el-table-column prop="fullName" label="员工姓名" width="120" />
              <el-table-column prop="role" label="员工类型" />
            </el-table>
          </div>
        </div>

        <!-- 右：类型、用户、权限勾选 -->
        <div class="right-pane">
          <el-form :model="form" label-width="90px" class="top-form">
            <div class="box">
              <div class="box-title">类型</div>
              <el-form-item label="类型名称">
                <el-input v-model="form.roleTypeName" placeholder="请输入类型名称" />
              </el-form-item>
            </div>

            <div class="box">
              <div class="box-title">用户</div>
              <el-row :gutter="10" align="middle">
                <el-col :span="10">
                  <el-form-item label="用户类型">
                    <el-select v-model="form.userType" placeholder="请选择">
                      <el-option label="管理员" value="admin" />
                      <el-option label="医生" value="doctor" />
                      <el-option label="护士" value="nurse" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="用户名">
                    <el-input v-model="form.username" placeholder="请输入用户名" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-checkbox v-model="allChecked" @change="toggleAll">全选</el-checkbox>
                </el-col>
              </el-row>
            </div>
          </el-form>

          <!-- 权限分组复选 -->
          <div class="perm-grid">
            <div class="perm-group" v-for="group in permissionGroups" :key="group.key">
              <div class="group-title">{{ group.title }}</div>
              <el-checkbox-group v-model="checkedKeys">
                <el-checkbox v-for="p in group.items" :key="p.key" :label="p.key">{{ p.label }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>

          <div class="actions">
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { writeApi } from '@/api/http'

type RoleType = { id: number; name: string }
const roleTypes = ref<RoleType[]>([{ id: 1, name: '管理员' }])

const users = ref([
  { id: 1, username: 'admin', fullName: '廖义德', role: '管理员' },
  { id: 2, username: 'nerd', fullName: '滕相配', role: '管理员' },
  { id: 3, username: 'admin2', fullName: '一位不愿意', role: '管理员' },
  { id: 4, username: 'Doctor1', fullName: '人之初', role: '管理员' },
])

const selectedUser = ref<any | null>(null)
const selectedRoleTypeId = ref<number | null>(null)
const form = reactive({ roleTypeName: '', userType: undefined as string | undefined, username: '' })

const permissionGroups = ref([
  { key: 'clinicDoctor', title: '门诊医生', items: [
    { key: 'choosePatient', label: '选病人' },
    { key: 'writeRecord', label: '写病历' },
    { key: 'openRx', label: '开中药' },
    { key: 'openWesternRx', label: '开西药' },
  ]},
  { key: 'system', title: '系统管理', items: [
    { key: 'registrationSetting', label: '挂号单设置' },
    { key: 'outpatientSlipSetting', label: '门诊单设置' },
    { key: 'inpatientSetting', label: '住院单设置' },
    { key: 'deptMgmt', label: '科室管理' },
    { key: 'permissionMgmt', label: '权限管理' },
    { key: 'employeeAdd', label: '员工添加' },
    { key: 'dataBackup', label: '数据备份' },
    { key: 'dataRestore', label: '数据恢复' },
  ]},
  { key: 'clinic', title: '门诊管理', items: [
    { key: 'patientRegister', label: '病人挂号' },
    { key: 'proxyCard', label: '代办医疗卡' },
    { key: 'refund', label: '退号' },
    { key: 'registerQuery', label: '挂号表查询' },
    { key: 'cardCompensation', label: '医疗卡补办' },
  ]},
  { key: 'finance', title: '财务管理', items: [
    { key: 'businessStats', label: '营业统计' },
    { key: 'employeeMgmt', label: '员工管理' },
    { key: 'salary', label: '工资分配' },
  ]},
  { key: 'pharmacy', title: '药房管理', items: [
    { key: 'queryPending', label: '查看待发药单' },
    { key: 'querySent', label: '查看已发药' },
  ]},
  { key: 'inpatient', title: '住院管理', items: [
    { key: 'admitPatient', label: '查看病房' },
    { key: 'bedMgmt', label: '病房添加' },
    { key: 'transfer', label: '交换查看' },
    { key: 'charge', label: '费用记账' },
    { key: 'discharge', label: '出院查看' },
    { key: 'addInpatient', label: '添加' },
    { key: 'deleteInpatient', label: '删除' },
  ]},
  { key: 'billing', title: '门诊收费', items: [
    { key: 'search', label: '查找' },
    { key: 'checkout', label: '门诊结账' },
  ]},
  { key: 'drugstore', title: '药库管理', items: [
    { key: 'stockIn', label: '药品入库' },
    { key: 'stockOut', label: '药品出库' },
    { key: 'drugView', label: '药品查看' },
    { key: 'drugReport', label: '药品报管' },
  ]},
])

// 勾选集合
const checkedKeys = ref<string[]>([])
const allKeys = computed(() => permissionGroups.value.flatMap(g => g.items.map(i => i.key)))
const allChecked = ref(false)

const toggleAll = () => {
  checkedKeys.value = allChecked.value ? [...allKeys.value] : []
}

const selectRoleType = (row: any) => {
  const r = row as RoleType
  selectedRoleTypeId.value = r.id
  form.roleTypeName = r.name
}

const onUserRowClick = (row: any) => {
  selectedUser.value = row
}

const save = async () => {
  try {
    const payload = {
      roleTypeId: selectedRoleTypeId.value,
      roleTypeName: form.roleTypeName,
      userType: form.userType,
      username: form.username,
      permissionKeys: checkedKeys.value,
    }
    await writeApi.post('/Permission/Save', payload)
    ElMessage.success('权限已保存')
  } catch (e) {
    ElMessage.error('保存失败')
  }
}
</script>

<style scoped lang="scss">
.permission-mgmt-container { padding: 20px; background: #f5f5f5; min-height: 100vh; }
.card-header { font-weight: 600; }
.layout { display: grid; grid-template-columns: 360px 1fr; gap: 20px; }
.left-pane { display: flex; flex-direction: column; gap: 16px; }
.left-section { background: #fff; border: 1px solid #e4e7ed; border-radius: 4px; padding: 10px; }
.section-title { font-weight: 600; margin-bottom: 8px; }
.right-pane { background: #fff; border: 1px solid #e4e7ed; border-radius: 4px; padding: 16px; }
.box { border: 1px solid #ebeef5; border-radius: 4px; padding: 12px; margin-bottom: 12px; }
.box-title { font-weight: 600; margin-bottom: 8px; }
.perm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.perm-group { border: 1px solid #ebeef5; border-radius: 4px; padding: 12px; }
.group-title { font-weight: 600; margin-bottom: 8px; }
.actions { margin-top: 12px; text-align: right; }
</style>


